<template>
    <view class="app-container qr">
        <zzk-nav title="商户二维码"></zzk-nav>
        <view class="qr-box flexcolumn">
            <image class="img" :src="qrurl" mode="aspectFill"></image>
            <u-button type="primary" text="立即下载" :loading="loading" @click="downloadFile"></u-button>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getQrcode } from '@/api/merchant.js'
import { showToast } from '@/utils/util'

const qrurl = ref('')
const loading = ref(false)

onLoad(() => {
    getQr()
})

const getQr = () => {
    getQrcode().then(res => {
        qrurl.value = res
    })
}

const downloadFile = () => {
    loading.value = true
    uni.downloadFile({
        url: qrurl.value,
        success: s => {
            if (s.statusCode === 200) {
                uni.saveImageToPhotosAlbum({
                    filePath: s.tempFilePath,
                    success: res => {
                        loading.value = false
                        showToast('保存成功')
                    },
                    fail: e => {
                        console.log(e)
                    }
                })
            }
        },
        fail: e => {
            console.log(e)
        }
    })
}
</script>

<style lang="scss" scoped>
.qr {
    background-color: #fff;
    &-box {
        justify-content: center;
        align-items: center;
        padding: 160rpx 40rpx 0;
        .img {
            width: 400rpx;
            height: 400rpx;
            margin-bottom: 80rpx;
        }
    }
}
</style>